<template>
	<div id="adm">
		<!-- 增加一个占位元素，高度与头部相同 -->
		<div class="header-placeholder"></div>
		<el-container style="min-width: 1000px;width: 100vw;height: 89vh;">
			<el-header class="adm-header">
				<h3 style="color: #7c7c7c;">伊凡书店后台管理系统</h3>
				<div style="display: flex;align-items: center;width: 50%;">
					<div style="width: 50%;font-size: 0.9rem;font-weight: 900;">
						<p>{{ store.state.user.name }}</p>
					</div>
					<div style="width: 50%">
						<el-button type="text" size="default" @click="login.out()" style="color: red;">退出</el-button>
					</div>
				</div>
			</el-header>
			<el-container style="position: relative;min-height: 92vh;">
				<el-aside class="adm-aside" width="250px">
					<div style="height: 70px;text-align: center;padding: 10px 0px;border-bottom: solid 1px #e6e6e6;"
						@click="goIndex">
						<el-avatar icon="el-icon-user-solid" size="large" shape="circle"
							:src="pic(store.state.user.img)" fit="fill"
							style="width: 70px;height: 70px;object-fit: cover;">adm</el-avatar>
					</div>
					<el-menu router :default-active="$route.path" :unique-opened="true"
						active-text-color="rgb(64, 158, 255);" class="el-menu-vertical-demo">

						<el-sub-menu index="/adm/hot">
							<template #title>
								<i class="el-icon-discover"></i>
								<span>热度图片</span>
							</template>
							<el-menu-item index="/adm/hot/list">热度图片</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="/adm/type">
							<template #title>
								<i class="el-icon-chicken"></i>
								<span>类型管理</span>
							</template>
							<el-menu-item index="/adm/type/list">一级类型</el-menu-item>
							<el-menu-item index="/adm/type2/list">二级类型</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="/adm/book">
							<template #title>
								<i class="el-icon-coin"></i>
								<span>商品管理</span>
							</template>
							<el-menu-item index="/adm/book/list">商品管理</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="/adm/user">
							<template #title>
								<i class="el-icon-user"></i>
								<span>用户管理</span>
							</template>
							<el-menu-item index="/adm/user/edit">冻结密码重置</el-menu-item>
							<el-menu-item index="/adm/user/list">管理员添加</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="/adm/ord">
							<template #title>
								<i class="el-icon-document"></i>
								<span>订单管理</span>
							</template>
							<el-menu-item index="/adm/order/list">订单管理</el-menu-item>
						</el-sub-menu>
					</el-menu>
				</el-aside>
				<el-main class="adm-main">
					<router-view />
				</el-main>
			</el-container>
			<el-footer class="adm-footer" style="height: 30px;line-height: 30px;">
				<hr style="padding: 0;">
				<p style="font-size: 12px;color: #919191;text-align: center;">
					备案/许可证编号：12009302号-1-www.shiquan.com Copyright
					<span style="color: red;">©</span>
					1号网上书店演示，All Rights Reserved. 复制必究 , Technical Support:
					<span style="font-weight: 600;color:red;">黄俊玮</span>
				</p>
			</el-footer>
		</el-container>
	</div>

</template>

<script setup>
	import pic from '../../api/pic';
	import login from '../../api/public/login';
	import {
		ElMessage
	} from 'element-plus';
	import router from '../../router';
	import store from '../../store';

	const goIndex = () => {
		router.push('/welcome')
	}
</script>

<style lang="less" scoped>
	/* 设置 html 和 body 的高度 */
	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	body {
		margin: 0;
		padding: 0;

		/* 为页脚预留空间，具体数值根据页脚高度调整 */
	}



	#adm {
		font-size: 18px;

		.header-placeholder {
			height: 40px;
			/* 与头部高度相同 */
		}

		// 页面的脑袋
		.adm-header {
			width: 100vw;
			min-width: 1000px;
			min-height: 40px;
			max-height: 40px;
			background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}

		// 页面的脚跟
		.adm-footer {
			width: 100vw;
			min-width: 1000px;
			background-color: white;
		}

		.adm-aside {
			border-right: solid 1px #e6e6e6;

		}

		.el-menu {
			border: none;
		}

		.adm-main {
			min-height: 100%;
		}
	}
</style>